<template>
    <div id="system" class="warp system">
        <postHead active="home" :showAction="true"></postHead>

        <div class="container">
            <div class="main-left">

                <div class="system-lt">
                    <ul class="sidemenu">
                        <li @click="toBaseInfo"><a><span class="iconmd iconmd-files"></span>基本信息</a></li>
                        <li @click="toCountManage"><a><span class="iconmd iconmd-user"></span>账号管理</a></li>
                        <li class="active"><a><span class="iconmd iconmd-adduser"></span>子账号管理</a></li>
                    </ul>
                </div>
                <!-- /.system-lt -->

            </div>
            <!-- /.main-left -->
            <!-- left /end -->


            <div class="main-right">

                <div class="system-rt">
                    <div class="resumeimport-tab">
                        <ul class="nav nav-tabs">
                            <li class="" :class="{active:active==0}" @click="setActive(0)"><a>子账号管理</a></li>
                            <li class="" :class="{active:active==1}" @click="setActive(1)"><a>账号类型说明</a></li>
                        </ul>
                    </div>
                    <div class="childaccount">
                        <div class="childacc-content" v-if="active==0">
                            <!-- 工具条 -->
                            <div class="toolbar">
                                <div class="pull-left" style="margin-top:5px" v-if="$root.userInfo.user.role=='admin'">
                                    <a class="btn btn-primary jayaddchildaccount" @click="showAddChild">新增账号</a>
                                </div>
                                <div class="tools set">
                                    <div class="form-inline">
                                        <div class="form-group">
                                            <input type="text" class="form-control"> <a class="toolsearch"><span class="iconmd iconmd-search"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 列表显示 -->
                            <div class="childacc-tabulate">

                                
                            <el-table :data="childList" ref="multipleTable"  stripe border style="width: 100%">
                                            
                                <el-table-column label="账号使用人" prop="name">
                                    
                                </el-table-column>
                                <el-table-column label="账户类型" prop="role">
                                
                                </el-table-column>
                                <el-table-column label="授权企业" >
                                    <template slot-scope="scope">
                                        <span>{{getCompanyInfoList(scope.row)}}</span>
                                    </template>
                                </el-table-column>
                             
                                <el-table-column label="手机">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.phone}}</span>
                                    </template>
                                </el-table-column>
                     
                                <el-table-column label="操作" v-if="$root.userInfo.user.role=='admin'">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="editChild(scope.row)">编辑</el-button>
                                        <el-button type="text" @click="deleteChild(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
						    </el-table>

                              

                                <div class="spetip">
                                    <p>说明：</p>
                                    <p>1.手机号即为登录账号；</p>
                                    <p>2.每个账号只能一个人同时在线；</p>
                                    <p>3.贵司现在可以设立的账号数为：10，还剩下10个可以设置；</p>
                                    <p>4.行使账号权限范围，一般默认全公司，若大型集团有下属子公司、分公司，请至“公司信息”设置“下属公司”，然后根据需要进行选择。</p>
                                </div>
                            </div>
                        </div>
                        <!-- /.childacc-content -->

                        <!-- 账号类型设置 -->
                        <div class="childacc-content" v-if="active==1">
                            <div class="limit">
                                <table class="table table-border">
                                    <tbody>
                                        <tr>
                                            <th style="width: 110px">账号类型名称</th>
                                            <th style="width: 110px">组织架构权限</th>
                                            <th style="width: 150px">简历权限</th>
                                            <th>项目权限</th>
                                            <th style="width: 150px">标签管理</th>
                                            <th>其它权限</th>
                                            <th style="width: 110px">权限范围</th>
                                            <th>账号管理</th>
                                        </tr>
                                       
                                        <tr>
                                            <th>招聘专员</th>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.新增岗位</li>
                                                    <li>2.编辑岗位</li>
                                                    <li>4.发布岗位</li>
                                                    <li>5.暂停岗位</li>
                                                    <li>6.刷新岗位</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.上传简历</li>
                                                    <li>2.查阅自己上传简历</li>
                                                    <li>3.查阅所有简历</li>
                                                    <li>4.检索简历</li>
                                                    <li>5.下载简历</li>
                                                    <li>6.编辑简历</li>
                                                    <li>8.云共享简历</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.加入岗位</li>
                                                    <li>2.简历从岗位移除</li>
                                                    <li>3.战略储备、拟初试、初试、拟复试、复试，阶段状态修改</li>
                                                    <li>4.拟录用、录用、试用、正式/转正，状态修改</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.给简历添加标签</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.编制、招聘需求，数据填写</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>被授权部门</li>
                                                </ul>
                                            </td>
                                            <td></td>
                                        </tr>
                                      
                                        <tr>
                                            <th>面试官</th>
                                            <td></td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.上传简历</li>
                                                    <li>2.查阅自己上传简历</li>
                                                    <li>3.查阅所有简历</li>
                                                    <li>4.检索简历</li>
                                                    <li>5.下载简历</li>
                                                    <li>6.编辑简历</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.加入岗位</li>
                                                    <li>2.简历从岗位移除</li>
                                                    <li>3.战略储备、拟初试、初试、拟复试、复试，阶段状态修改</li>
                                                    <li>4.拟录用、录用、试用、正式/转正，状态修改</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.给简历添加标签</li>
                                                </ul>
                                            </td>
                                            <td></td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>被授权部门</li>
                                                </ul>
                                            </td>
                                            <td></td>
                                        </tr>
                                        
                                        <tr>
                                            <th>系统管理员</th>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.新增岗位</li>
                                                    <li>2.编辑岗位</li>
                                                    <li>3.删除岗位</li>
                                                    <li>4.发布岗位</li>
                                                    <li>5.暂停岗位</li>
                                                    <li>6.刷新岗位</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.上传简历</li>
                                                    <li>2.查阅自己上传简历</li>
                                                    <li>3.查阅所有简历</li>
                                                    <li>4.检索简历</li>
                                                    <li>5.下载简历</li>
                                                    <li>6.编辑简历</li>
                                                    <li>7.删除简历</li>
                                                   
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.加入岗位</li>
                                                    <li>2.简历从岗位移除</li>
                                                    <li>3.战略储备、拟初试、初试、拟复试、复试，阶段状态修改</li>
                                                    <li>4.拟录用、录用、试用、正式/转正，状态修改</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.给简历添加标签</li>
                                                    <li>2.新增标签类型</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.编制、招聘需求，数据填写</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>被授权部门</li>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul class="limitlist">
                                                    <li>1.主账号修改，密码重置</li>
                                                    <li>2.新增子账号、修改名称、登录名、重置密码、删除等</li>
                                                </ul>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>



        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="form" style="display:inline-block">
                <el-form-item label="使用人姓名" :label-width="formLabelWidth">
                    <el-input v-model="childForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth" >
                    <el-input v-model="childForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" :label-width="formLabelWidth" v-if="!childForm.id">
                    <el-input v-model="childForm.code" autocomplete="off" style="width:290px"></el-input>
                    <input type="button" class="form-control MobileValidateCode" v-if="showCode" style="width: 110px;float:right;height:40px;margin-left:10px" value="获取验证码" @click="sendCode">
                    <input type="button" class="form-control MobileValidateCode" v-else style="width: 110px;height:40px;margin-left:10pxfloat:right" :value="time+'秒'" >
                </el-form-item>
                
                 <el-form-item label="企业授权" :label-width="formLabelWidth" >
                     <el-select v-model="childForm.enterpriseIds" multiple placeholder="请选择" style="width: 450px;">
                        <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="账户类型" :label-width="formLabelWidth" >
                     <el-select v-model="childForm.role" placeholder="请选择" style="width: 450px;">
                        <el-option
                        v-for="item in dictInfo.hireUserRole"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item label="账户状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="childForm.status">
                        <template  v-for="item in dictInfo.status">
                            <el-radio :label="item.value">{{item.label}}</el-radio>
                        </template>
                      
                      
                      
                    </el-radio-group>
                </el-form-item> -->
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveChildAccount">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    regionData,
    codeToText
} from "element-china-area-data";
import postHead from '@/components/postHead.vue';
import homeapi from '@/api/api.js'
import until from '@/api/until'
export default {
    name: 'login',
    data() {
        return {
            phone: "",
            haveCheck: false,
            code: "",
            title: "",
            loginType: 1,
            loginCode: 1,
            active: 0,
            form: {
                annualRevenue: "",
                annualRevenueName: '',
                contactName: "",
                creditCode: "",
                email: "",
                enterpriseIndustry: "",

                enterpriseNature: "",

                enterpriseScale: "",

                landlineNumber: "",
                licenceImg: "",
                licenceImgUrl: "",
                listingType: "",
                listingTypeName: "",
                name: "",
                officialWebsite: "",
                phone: "",
                staffsNum: "",
                staffsNumName: '',
                wechatOfficialAccount: "",
                inviteCode: "",
                inviter: "",

                inviterPhone: "",

            },

            userForm: {
                inviteCode: "",
                inviter: "",
                inviterPhone: "",
                name: "",
                nickName: "",
                workplace: "",
                idCard: "",
                personHighestDegree: {

                },
                personImportantUnits: {

                }
            },
            enterpriseScaleList: [],
            enterpriseIndustry: [],
            enterpriseNatureList: [],
            staffsNumList: [],

            regionDatas: regionData,
            cateProps: {
                value: "value",
                label: "label",
                children: "children",
            },
            props: {
                value: "id",
                label: "text",
                children: "children",

            },
            showCode: true,
            time: 60,

            dialogTitle:"新增子账号",
            dialogFormVisible:false,
            childForm:{
                code:"",
                enterpriseIds:[],
                id:"",
                name:"",
                phone:"",
                role:"",
                status:1
            },
            formLabelWidth:'120px',

            dictInfo:{},
            childList:[],
            companyList:[],
        }
    },
    components: {
        postHead
    },
    mounted() {
        let title = this.$route.query.title
        if (title) {
            this.title = title
        }
        else {
            this.title = "AI爱招聘-注册"
        }
        this.getDictList();
        this.getChildAccountList();
        this.getChildCompanyList()

    },
    methods: {
        getCompanyInfoList(item){
            let info=""
            item.enterpriseList.map(json=>{
                if(info==""){
                    info=json.name
                }
                else{
                    info+=","+json.name
                }
            })
            return info
        },

        setActive(active){
            this.active=active
        },
         //获取子公司信息
        async getChildCompanyList(){
            let data=await homeapi.getCompanyList();
            if(data.code==200){
                this.companyList=data.result
            }
        },
        showAddChild(){
            this.dialogFormVisible=true;
            this.childForm={
                code:"",
                enterpriseIds:[],
                id:"",
                name:"",
                phone:"",
                role:"",
                status:1
            }
        },

        toCountManage(){
            this.$router.push("/company/accountInfo")
        },
        toBaseInfo(){
            this.$router.push("/company/systeminfo")
        },

        toLogin() {
            this.$router.push("/login/loginnew")
        },
        setActive(type) {
            this.active = type;
        },
        //获取数据字典
        async getDictList() {
            let data = await homeapi.getDictList();
            if (data.code == 200) {
               this.dictInfo=data.result
            }
        },
        deleteImg() {
            this.form.licenceImg = ""
            this.form.licenceImgUrl = ""
        },
        //获取子账号列表
        async getChildAccountList(){
            let data=await homeapi.getChildAccountList();
            if(data.code==200){
                this.childList=data.result
            }
            // let data=await homeapi 
        },

        async saveChildAccount(){

           

            let form=this.childForm
            if(form.id){
                let data=await homeapi.editChildAccound(form);
                if(data.code==200){
                    this.$toast("编辑成功");
                    this.getChildAccountList();
                    this.dialogFormVisible=false
                }
            }
            else{
                let data=await homeapi.addChildAccound(form);
                if(data.code==200){
                    this.$toast("新增成功");
                    this.getChildAccountList();
                    this.dialogFormVisible=false
                }
            }
           
        },

      



        async sendCode() {
            let phone = this.childForm.phone
            if (phone.length != 11) {
                this.$message.error("请传入正确的手机号")
                return false;
            }

            let data = await homeapi.sendCode({ phone });

            if (data.code == 200) {
                this.showCode = false
                this.getTimeNext();
            }
            else {
                this.$message.error(data.message)

            }
        },

        getTimeNext() {
            if (this.time > 0) {
                this.time = this.time - 1;
                setTimeout(() => {
                    this.getTimeNext();
                }, 1000)
            }
            else {
                this.showCode = true;
                this.time = 60
            }
        },
        setCheck() {
            this.haveCheck = true;
        },
        
        async getUserInfo() {
            let data = await homeapi.getUserinfo();
            if (data.code == 402) {

            }
            if (data.code == 403) {
                this.$router.push("/company")

            }
            if (data.code == 200) {

            }

        },

        async sureEdit() {
            if (this.active == 1) {
                let form = this.form;

                let data = await homeapi.editCompany(form);
                if (data.code == 200) {
                    this.loading = false
                    this.$message.success("注册成功")
                    this.$router.push("/")
                }
            }
            else {
                let form = this.form;

                let data = await homeapi.editUser(form);
                if (data.code == 200) {
                    this.loading = false
                    this.$message.success("注册成功")
                    this.$router.push("/")
                }
            }

        },
        async changeFile(e) {
            if (e.target.files.length > 0) {
                let file = e.target.files[0]
                var formData = new FormData();
                // 服务端要求参数是 pic1 
                formData.append('file', file);
                let data = await homeapi.uploadFile(formData);
                if (data.code == 200) {

                    this.form.licenceImgUrl = data.result.url
                    this.form.licenceImg = data.result.path
                }
            }

        },
        async editChild(item){
            console.log(item)
            this.dialogFormVisible=true;

            let enterpriseIds=[];
            item.enterpriseList.map(res=>{
                enterpriseIds.push(res.id)
            })
            let role="";
            this.dictInfo.hireUserRole.map(res=>{
                if(res.label==item.role){
                    role=res.value
                }
            })

            this.childForm={
                code:"",
                enterpriseIds:enterpriseIds,
                id:item.id,
                name:item.name,
                phone:item.phone,
                role:role,
                status:1
            }
        },


        deleteChild(item){
            this.$confirm("此操作将删除该子账户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
            let id = item.id;
            const data = await homeapi.deleteChildCompany({ id });
            if (data.code == 200) {
                this.getChildCompanyList();
            }
            })
            .catch(() => {});
        }
       


    }
}

</script>

<style scoped lang="less">
.footer {
    position: fixed;
}
.sidemenu li{
    font-size: 16px;
}
.container {
    width: 100%;
    height: calc(100vh - 125px);
    overflow: auto;
    margin-top: 15px;
}

.main-left {
    position: fixed;
    top: 95px;
    bottom: 30px;
    background: #fff;
}

.system-lt {
    border: 0px;
}

.system-rt {
    border: 0px;
}

.main-right {
    margin-left: 0px;
}

.navbar-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.navbar-header span {
    font-size: 24px;
    color: #FC7B24;
    font-weight: bold;
}

.upload_div {
    width: 80px;
    height: 80px;
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.upload_div input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.upload_div i {
    font-size: 18px;
}

.register-form-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
</style>

<style>
.el-table th.el-table__cell {
	background: #ebebeb;
}

.el-table thead {
	color: #333333;
	font-weight: bold;
}

.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
	border-right: 1px solid #ddd;
}

.el-table .el-table__cell {
	padding: 8px !important;
}
.el-table__row .el-table__cell{
	padding: 10px 0 !important;
}
.table_head{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  padding-bottom: 15px;
}
.systitle::after{
  display: none;
  margin-bottom: 0px !important;
}
.systitle{
  margin-bottom: 0px !important;
}
</style>
